<template>
  <view class="interaction-stats">
    <view class="stat-item">
      <text class="stat-icon">👁</text>
      <text class="stat-number">{{ views || 0 }}</text>
    </view>
    <view class="stat-item">
      <text class="stat-icon">💬</text>
      <text class="stat-number">{{ commentsCount || 0 }}</text>
    </view>
    <view class="stat-item" @click.stop="handleLikeClick">
      <text class="stat-icon" :class="{ liked: isLiked }">❤</text>
      <text class="stat-number">{{ likeCount || 0 }}</text>
    </view>
  </view>
</template>
  
  <script>
import { ref, computed } from "vue";

export default {
  name: "InteractionStats",
  props: {
    // 浏览量
    views: {
      type: Number,
      default: 0,
    },
    // 评论数
    commentsCount: {
      type: Number,
      default: 0,
    },
    // 点赞数
    likeCount: {
      type: Number,
      default: 0,
    },
    // 是否已点赞
    isLiked: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["like-click"],
  setup(props, { emit }) {
    // 处理点赞点击事件
    const handleLikeClick = () => {
      emit("like-click");
    };

    return {
      handleLikeClick,
    };
  },
};
</script>
  
  <style lang="scss" scoped>
.interaction-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }

  &:active {
    transform: scale(0.95);
  }
}

.stat-icon {
  font-size: 18px;
  transition: all 0.3s ease;
  &.liked {
    color: #ff4444;
    animation: heartBeat 0.6s ease-in-out;
  }
}

.stat-number {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>